import React from 'react';
import styled from 'styled-components';

const TopicContainer = styled.div`
  display: flex;
  flex-direction: column;
  background-color: #181818;
`;

const TopicHeader = styled.div`

`;

const TopicTitle = styled.div`
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  font-size: 36px;
  color: #319C73;
  text-transform: uppercase;
  margin: 2rem auto;
  text-align: center;
`;

const TopicBody = styled.div`

`;

export const Topic = (props) => {
  return (
    <TopicContainer>
      <TopicHeader>
        <TopicTitle>[- { props.title } -]</TopicTitle>
      </TopicHeader>
      <TopicBody>
        {props.children}
      </TopicBody>
    </TopicContainer>
  )
}